﻿@page "/components/shimmer"

<PageOutlet Url="shimmer"
            Title="Shimmer"
            Description="shimmer of the bit blazorui components" />

<DemoPage Name="Shimmer"
          SecondaryNames="@(["Skeleton"])"
          Description="Shimmer is a temporary animation placeholder for when a service call takes time to return data and you don't want to block rendering the rest of the UI."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Progress/Shimmer/BitShimmer.razor"
          GitHubDemoUrl="Progress/Shimmer/BitShimmerDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Explore the fundamental use of the BitShimmer.</div>
        <br />
        <BitShimmer />
    </DemoExample>

    <DemoExample Title="Size" RazorCode="@example2RazorCode" Id="example2">
        <div>The BitShimmer can be customized using the Height and Width parameters.</div>
        <br />
        <div>Height</div>
        <BitShimmer Height="5rem" />
        <br />
        <div>Width</div>
        <BitShimmer Width="10rem" />
    </DemoExample>

    <DemoExample Title="Circle" RazorCode="@example3RazorCode" Id="example3">
        <div>The BitShimmer can be rendered in Circle shape instead of a rectangle.</div>
        <br /><br />
        <div>Height</div>
        <BitShimmer Circle Height="3rem" />
        <br />
        <div>Width</div>
        <BitShimmer Circle Width="4rem" />
    </DemoExample>

    <DemoExample Title="Animation" RazorCode="@example4RazorCode" Id="example4">
        <div>Discover various animation options of BitShimmer for different effects.</div>
        <br /><br />
        <div>Wave (default)</div>
        <BitShimmer Height="4rem" Duration="5000" Delay="1000" />
        <br /><br />
        <div>Pulse</div>
        <BitStack Horizontal>
            <BitShimmer Pulse Circle Height="4rem" Duration="3000" Delay="1000" />
            <BitShimmer Pulse Height="4rem" Width="100%" Duration="3000" Delay="1000" />
        </BitStack>
    </DemoExample>

    <DemoExample Title="Loaded" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Utilize BitShimmer's Loaded feature, displaying content when data is loaded.</div>
        <br /><br />
        <BitShimmer Loaded="@isDataLoaded" AriaLabel="Loading content" Height="1.5rem">
            Content loaded successfully.
        </BitShimmer>
        <br />
        <BitToggleButton @bind-IsChecked="@isDataLoaded" Text="Toggle shimmer" />
    </DemoExample>

    <DemoExample Title="Advanced" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>Explore advanced usage of BitShimmer, including template, content and nested shimmers.</div>
        <br /><br />
        <BitShimmer Loaded="@isContentLoaded" AriaLabel="Loading content" Width="15rem" Height="unset">
            <Content>
                <BitImage Height="8rem" Alt="bit logo"
                          Src="_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png" />
                <br />
                <BitPersona PrimaryText="Annie Lindqvist"
                            SecondaryText="Software Engineer"
                            Size="@BitPersonaSize.Size56"
                            Presence="@BitPersonaPresence.Online"
                            ImageUrl="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" />
            </Content>
            <Template>
                <BitShimmer Height="8rem" />
                <br />
                <BitStack Horizontal Alignment="BitAlignment.Center">
                    <BitShimmer Circle Height="3.5rem" />
                    <BitStack>
                        <BitShimmer Height="1.25rem" Width="8.5rem" />
                        <BitShimmer Height="0.75rem" Width="7rem" />
                    </BitStack>
                </BitStack>
            </Template>
        </BitShimmer>
        <br />
        <BitToggleButton @bind-IsChecked="@isContentLoaded" Text="Toggle shimmer" />
    </DemoExample>

    <DemoExample Title="Color" RazorCode="@example7RazorCode" Id="example7">
        <div>Customize the BitShimmer using different colors available in bit BlazorUI.</div>
        <br /><br />
        <div>Primary</div>
        <BitShimmer Height="1rem" Color="BitColor.Primary" />
        <br />
        <div>Secondary</div>
        <BitShimmer Height="1rem" Color="BitColor.Secondary" />
        <br />
        <div>Tertiary</div>
        <BitShimmer Height="1rem" Color="BitColor.Tertiary" />
        <br />
        <div>Info</div>
        <BitShimmer Height="1rem" Color="BitColor.Info" />
        <br />
        <div>Success</div>
        <BitShimmer Height="1rem" Color="BitColor.Success" />
        <br />
        <div>Warning</div>
        <BitShimmer Height="1rem" Color="BitColor.Warning" />
        <br />
        <div>SevereWarning</div>
        <BitShimmer Height="1rem" Color="BitColor.SevereWarning" />
        <br />
        <div>Error</div>
        <BitShimmer Height="1rem" Color="BitColor.Error" />
        <br />
        <div>PrimaryBackground</div>
        <BitShimmer Height="1rem" Color="BitColor.PrimaryBackground" />
        <br />
        <div>SecondaryBackground</div>
        <BitShimmer Height="1rem" Color="BitColor.SecondaryBackground" />
        <br />
        <div>TertiaryBackground (default)</div>
        <BitShimmer Height="1rem" Color="BitColor.TertiaryBackground" />
        <br />
        <div>PrimaryForeground</div>
        <BitShimmer Height="1rem" Color="BitColor.PrimaryForeground" />
        <br />
        <div>SecondaryForeground</div>
        <BitShimmer Height="1rem" Color="BitColor.SecondaryForeground" />
        <br />
        <div>TertiaryForeground</div>
        <BitShimmer Height="1rem" Color="BitColor.TertiaryForeground" />
        <br />
        <div>PrimaryBorder</div>
        <BitShimmer Height="1rem" Color="BitColor.PrimaryBorder" />
        <br />
        <div>SecondaryBorder</div>
        <BitShimmer Height="1rem" Color="BitColor.SecondaryBorder" />
        <br />
        <div>TertiaryBorder</div>
        <BitShimmer Height="1rem" Color="BitColor.TertiaryBorder" />
    </DemoExample>

    <DemoExample Title="BackgroundColor" RazorCode="@example8RazorCode" Id="example8">
        <div>Customize the BitShimmer using different colors available in bit BlazorUI.</div>
        <br /><br />
        <div>Primary</div>
        <BitShimmer Height="2rem" Background="BitColor.Primary" />
        <br />
        <div>Secondary</div>
        <BitShimmer Height="2rem" Background="BitColor.Secondary" />
        <br />
        <div>Tertiary</div>
        <BitShimmer Height="2rem" Background="BitColor.Tertiary" />
        <br />
        <div>Info</div>
        <BitShimmer Height="2rem" Background="BitColor.Info" />
        <br />
        <div>Success</div>
        <BitShimmer Height="2rem" Background="BitColor.Success" />
        <br />
        <div>Warning</div>
        <BitShimmer Height="2rem" Background="BitColor.Warning" />
        <br />
        <div>SevereWarning</div>
        <BitShimmer Height="2rem" Background="BitColor.SevereWarning" />
        <br />
        <div>Error</div>
        <BitShimmer Height="2rem" Background="BitColor.Error" />
        <br />
        <div>PrimaryBackground</div>
        <BitShimmer Height="2rem" Background="BitColor.PrimaryBackground" />
        <br />
        <div>SecondaryBackground (default)</div>
        <BitShimmer Height="2rem" Background="BitColor.SecondaryBackground" />
        <br />
        <div>TertiaryBackground</div>
        <BitShimmer Height="2rem" Background="BitColor.TertiaryBackground" />
        <br />
        <div>PrimaryForeground</div>
        <BitShimmer Height="2rem" Background="BitColor.PrimaryForeground" />
        <br />
        <div>SecondaryForeground</div>
        <BitShimmer Height="2rem" Background="BitColor.SecondaryForeground" />
        <br />
        <div>TertiaryForeground</div>
        <BitShimmer Height="2rem" Background="BitColor.TertiaryForeground" />
        <br />
        <div>PrimaryBorder</div>
        <BitShimmer Height="2rem" Background="BitColor.PrimaryBorder" />
        <br />
        <div>SecondaryBorder</div>
        <BitShimmer Height="2rem" Background="BitColor.SecondaryBorder" />
        <br />
        <div>TertiaryBorder</div>
        <BitShimmer Height="2rem" Background="BitColor.TertiaryBorder" />
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example9RazorCode" Id="example9">
        <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
        <br /><br />
        <div>
            <div>Component's Style & Class:</div><br />
            <BitShimmer Height="2.7rem" Style="border:2px solid gray" />
            <br /><br />
            <BitShimmer Height="2.7rem" Class="custom-class" />
            <br /><br /><br />
            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitShimmer Height="2.7rem" Styles="@(new() { Shimmer="background-color: darkgoldenrod;",
                                                          ShimmerWrapper = "background-color: darkgoldenrod;" })" />
            <br /><br />
            <BitShimmer Height="2.7rem" Classes="@(new() { Root = "custom-root",
                                                           Shimmer="custom-shimmer",
                                                           ShimmerWrapper = "custom-wrapper" })" />
        </div>
    </DemoExample>
</DemoPage>
